<template>
  <div class="service">
    <van-cell-group :clickable="true">
      <van-cell is-link>
        <template #title>
          <div class="service-title">
            <strong class="custom-title"> 选择 </strong>
            <span> 颜色、款式 </span>
          </div>
        </template>
      </van-cell>

      <van-cell is-link>
        <template #title>
          <div class="service-title">
            <strong class="custom-title"> 配送 </strong>
            <span> 广东省 深圳市 南山区 </span>
          </div>
        </template>
      </van-cell>

      <van-cell is-link>
        <template #title>
          <div class="service-title">
            <strong class="custom-title"> 运费</strong>
            <span> 此商品包邮 </span>
          </div>
        </template>
      </van-cell>

      <van-cell is-link>
        <template #title>
          <div class="service-title">
            <strong class="custom-title"> 说明</strong>
            <span style="max-width：180px">
              {{ service | serviceFilter }}
            </span>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  props: {
    service: Array
  },
  filters: {
    serviceFilter(service) {
      return service.map((item) => item.name).join(' 、')
    }
  }
}
</script>

<style scoped lang="less">
.service {
  margin: 10px 0;
  background: white;
  border-radius: 10px;

  /deep/.van-cell {
    border-radius: 10px;
  }
  .service-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    word-wrap: break-word;
    .custom-title {
      width: 60px;
    }
  }
}
</style>
